$bluetheme: #338ACB;
$redtheme: #F66441;
.site-agreement{
  background-color: #ffffff;
  // height: 100%;
  // min-height: 100%;
  overflow: scroll;
  @include px2rem(padding, 30 30);
  ul{
    h5{
      @include font-dpr(30);
      color: #333;
      font-weight: 600;
      @include px2rem(margin-bottom, 60);
    }
    li{
      @include px2rem(margin-top, 10);
      @include font-dpr(26);
      color: #333;
      &.title{
        font-weight: 600;
        @include px2rem(margin-bottom, 20);
      }
      span{
        font-weight: 600;
      }
      em{
        text-decoration: underline;
        font-weight: 600; 
      }
    }
  }
}
.site-home-header{
  position: relative;
  @include px2rem(height, 88);
  @include display-flex();
  @include align-items(center);
  @include justify-content(center);
  background: #fff;
  color: #282828;
  @include font-dpr(32);
  .header-back{
    position: absolute;
    @include px2rem(left, 30);
    @include px2rem(width, 19);
    @include px2rem(bottom, 29);
  }
}
.home-img{
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  img{
    width: 100%;
  }
}
.home-nav{
  @include px2rem(padding, 0 0 40 0);
  background: #fff;
  .mod-item{
    @include display-flex();
    @include justify-content(space-around);
    @include px2rem(margin-top, 40);
    .mod{
      @include display-flex();
      @include flex-direction-column();
      @include align-items(center);
      .tip{
        @include font-dpr(23);
        color: #323232;
        @include px2rem(margin-top, 14);
      }
      .nav-icon{
        @include wh(94, 94);
        border-radius: 50%;
        @include display-flex();
        @include justify-content(center);
        @include align-items(center);
        &.icon-1{
          background: linear-gradient(0deg, #F8B332 0%, #F7DA43 100%);
          img{
            @include px2rem(width, 74);
          }
        }
        &.icon-2{
          background: linear-gradient(0deg, #289EFC 0%, #67C3FC 100%);
          img{
            @include px2rem(width, 64);
          }
        }
        &.icon-3{
          background: linear-gradient(0deg, #F94D55 0%, #F47981 100%);
          img{
            @include px2rem(width, 57);
          }
        }
        &.icon-4{
          background: linear-gradient(0deg, #897AE5 0%, #B396EF 100%);
          img{
            @include px2rem(width, 61);
          }
        }
        &.icon-5{
          background: linear-gradient(0deg, #FA736B 0%, #FC9374 100%);
          img{
            @include px2rem(width, 53);
          }
        }
        &.icon-6{
          background: linear-gradient(0deg, #22BE93 0%, #52E49D 100%);
          img{
            @include px2rem(width, 67);
          }
        }
        &.icon-7{
          background: linear-gradient(0deg, #3AD1C1 0%, #66E7DD 100%);
          img{
            @include px2rem(width, 56);
          }
        }
        &.icon-8{
          background: linear-gradient(0deg, #D85BC2 0%, #F587E9 100%);
          img{
            @include px2rem(width,57);
          }
        }
      }
    }
  }
}
.home-content{
  background: #F5F5F5;
  @include px2rem(padding, 26 30 30 30);
  .bg-xh{
    @include px2rem(margin-bottom, 26);
    @include px2rem(height, 208);
    @include display-flex();
    @include align-items(center);
    .text{
      font-weight: bold;
      width: 100%;
      @include display-flex();
      @include align-items(center);
      @include flex-direction(row-reverse);
      @include font-dpr(42);
      color: #fff;
      @include px2rem(margin-right, 40);
    }
    &.bg1{
      background: url('./assets/icon/bg01.png') no-repeat center center;
      background-size: auto 100%;
    }
    &.bg2{
      background: url('./assets/icon/bg02.png') no-repeat center center;
      background-size: auto 100%;
    }
  }
}
.lute-right{
  .head{
    @include display-flex();
    @include align-items(center);
    @include justify-content(space-between);
    @include px2rem(margin-bottom, 20);
    .title{
      color: #282828;
      @include font-dpr(23);
      @include px2rem(border-bottom-width, 3);
      border-bottom-style: solid;
      border-bottom-color: #3C8DCD;
      @include px2rem(padding-bottom, 2);
    }
  }
  .item-mod{
    @include px2rem(height, 106);
    @include display-flex();
    @include align-items(center);
    @include justify-content(space-between);
    border-bottom: 1px dashed #ddd;
    .text{
      @include px2rem(width, 463);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      .circel{
        @include wh(8, 8);
        display: inline-block;
        border-radius: 50%;
        background: #378CCF;
        @include px2rem(margin-right, 8);
      }
      .name{
        @include font-dpr(23);
        color: #282828;
      }
    }
    .right{
      @include wh(150, 85);
    }
    .time{
      @include font-dpr(21);
      color: #9C9B9B;
      margin-top: 10px;
      margin-left: 13px;
    }
  }
}
.site-intaller{
  background: #F5F5F5;
  height: 100%;
  @include px2rem(padding, 20);
  .item-mod{
    @include display-flex();
    @include justify-content(space-between);
    @include px2rem(margin-bottom, 20);
    .mod{
      @include display-flex();
      @include flex-direction-column();
      background: #fff;
      @include px2rem(padding, 14 13 0 13);
      flex: 1;
      @include align-items(center);
      .img{
        width: 100%;
      }
      .text{
        @include px2rem(height, 56);
        @include display-flex();
        @include align-items(center);
        @include justify-content(center);
        color: #5B6373;
        @include font-dpr(23);
      }
    }
  }
  .item-list{
    @include display-flex();
    @include justify-content(space-between);
    @include align-items(center);
    background: #fff;
    @include px2rem(height, 104);
    @include px2rem(margin-top, 14);
    .name{
      color: #5B6373;
      @include font-dpr(24);
      // @include px2rem(line-height, 114px);
      @include px2rem(margin-left, 34);
    }
    .ar{
      @include px2rem(margin-right, 25);
      @include px2rem(width, 20);
    }
    .arrow{
      @include wh(16, 16);
      @include px2rem(margin-right, 20);
      border-top: 1px solid $redtheme;
      border-right: 1px solid $redtheme;
      transform: rotate(45deg);
    }
  }
}
.cloud-menu-item{
  @include display-flex();
  @include px2rem(height, 80);
  @include align-items(center);
  .item{
    width: 25%;
    @include display-flex();
    @include align-items(center);
    @include justify-content(center);
    @include px2rem(border-bottom-width, 8);
    border-bottom-color: #fff;
    border-bottom-style: solid;
    @include font-dpr(28);
    color: #6A6A6A;
    height: 100%;
    &.t-with{
      width: 33.333%;
    }
    &.active{
      color: $bluetheme;
      border-bottom-color: $bluetheme;
    }
    &.red{
      &.active{
        color: $redtheme;
        border-bottom-color: $redtheme;
      }
    }
  }
}
.cloud-down{
  @include px2rem(margin-top, 50);
  text-align: center;
  @include font-dpr(24);
  color: #282828;
}
.detail-view{
  background: #f5f5f5;
  @include px2rem(padding, 30);
  p{
    img{
      width: 100% !important;
      height: auto !important;
    }
    @include font-dpr(25);
    span{
      @include font-dpr-important(25);
      @include px2pximportant(line-height, 45);
      // line-height: normal !important;
    }
  }
  table{
    width: 100% !important;
  }
}
.ac-item{
  @include px2rem(height, 104);
  background: $redtheme;
  @include display-flex();
  @include align-items(center);
  @include justify-content(center);
  color: #fff;
  @include font-dpr(33);
  @include px2rem(margin-bottom, 25);
}
.xh-menu-item{
  @include display-flex();
  @include px2rem(height, 80);
  @include align-items(center);
  .item{
    width: 33.333%;
    @include display-flex();
    @include align-items(center);
    @include justify-content(center);
    @include px2rem(border-bottom-width, 8);
    border-bottom-color: #fff;
    border-bottom-style: solid;
    @include font-dpr(28);
    color: #6A6A6A;
    height: 100%;
    &.t-with{
      width: 50%;
    }
    &.active{
      color: $redtheme;
      border-bottom-color: $redtheme;
    }
    &.red{
      &.active{
        color: $redtheme;
        border-bottom-color: $redtheme;
      }
    }
  }
}
.video-bg{
  background: #fff;
}
.text-center{
  text-align: center;
  @include px2rem(margin-top, 40);
}
.note-video-clip{
  width: 100% !important;
  background: #fff;
}